table de おかたづけ

■■■

★★★ 表（table) で　整理 ★★★

■■■

★★★ 整頓しましょ　遊びましょ ★★★

■	★単純に簡単に整理がした～い　という方
■	★ラインもサイズ・カラーは？　という方　こちら
■	★
■	★
■	★

＊始める前に　楽天の編集ページには
自動改行（初心者向け）と自動改行なし（<BR>タグで指定）がありますが
改行なしで作成されることを基準にして説明しますのでご了承ください

★単純に簡単に整理がした～い　という方

難しく考えると　大変なので
横に並んでるものや　整理したいよぉ　っと思っておられる方
ｺﾚ以下をお読みくださいませ＾＾

1-1	1-2
2-1	2-2

ｺﾚは　table という要素を使って　表を作成し
　その中に数字を納めたものです

表組　table　の　基本的なﾀｸﾞです

<TABLE border="1">
<TBODY>
<TR>
<TD>1-1</TD>
<TD>1-2</TD>
</TR>
<TR>
<TD>2-1</TD>
<TD>2-2</TD>
</TR>
</TBODY>
</TABLE>

<TABLE >で始まり</TABLE>で終わる
この間に
縦横に並ぶセルを作ります

←赤い文字にした部分です

TRは行の定義　指示します
TDは列の定義　指示します

列の数だけ<TD></TD>のｾｯﾄが並びます
この繰り返しを<TR>と</TR>ではさみます

一行目は二列なので２回（1-1,1-2の部分）
はさまっているのがわかりますか？
二行目の二列も見つかりましたか？（2-1,2-2の部分）

この数字の箇所に画像をはさむと･･･

となります
ｺｺまでが単純な表組です

要は　上記の　ﾀｸﾞをコピーして使ってください
数字のところに
好きなもの入れちゃって～　ってことです

ｺﾚで　あなたも　片付け上手ってことですね～

★ラインもサイズも考えた～い　という方

２行２列の表は作れましたか＾＾

３行４列とか遊んでみてね

　　←　コレをコピーして使うと3行4列です　できた？

で･･･説明していなかったけど気になっていた人いるかしら?

TABLE の脇にある　border="1"　（赤い文字にしてあります）ｺﾚは数字を変えてみるとワカルヨ＾＾ｂ

3に変えると

1-1	1-2
2-1	2-2

7に変えると

1-1	1-2
2-1	2-2

・・・ｺｺは解説無しでよいですかぁ＾＾
0 にするか　borderを入れないと　枠は表示されません

では大きさのバラバラなものを入れてみましょう

1-1	1-2
ぶ	2-2

２行目１列目にぶをいれて見ましたよ

大きさが変わったのが解りますか

枠のサイズを指定していないので
行・列幅が一番大きいフォント（（font)文字の大きさ）になります

1-1	ぶ
2-1	2-2

ねっ＾＾

ではサイズ指定をして見ましょう

width は　表組の横幅 heigh 　は　表組の縦幅　　いずれも　ﾋﾟｸｾﾙ数か％で

うふっ

ｺﾚは　table のところで指定したもの
<TABLE width="100" height="100" border="1">
<TR>
<TD>うふっ</TD>
</TR>
</TABLE>

ここまで　わかりましたか？
では次は　飾ってみましょう
　

次　行ってみます？